<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <div id="mark">
            <h1>宝贝与描述相符(打分匿名)</h1>
            <div id="pic">
                <img src="images/star0.png" title="1" name="0"/>
                <img src="images/star0.png" title="2" name="1"/>
                <img src="images/star0.png" title="3" name="2"/>
                <img src="images/star0.png" title="4" name="3"/>
                <img src="images/star0.png" title="5" name="4"/>
                <br/>
            </div>
            <form>
                <textarea cols="40" rows="8" value="" id='txt'></textarea>
                <br/>
                <button class="btn">公开评论</button>
            </form>
        </div>
    </div>
</body>
<script>
     /*
        1、先得到要操作的网页元素的DOM对象
        img的DOM对象，textarea的DOM对象
        2、遍历图片的DOM对象集合，绑定事件，
        绑定鼠标移上的事件，鼠标移开的事件
        3、事件触发时，回调函数的执行
        鼠标移上时，判断当前移上的图片是第几个图片
        ，获取当前图片的title属性
        根据是第几张图，来决定如何切换图片，
        > 2  star2.png   < 2 star1.png

        第六章 BOM 复习
    */
   //获取DOM对象
   var images = document.getElementsByTagName("img");
   var textarea = document.getElementById("txt");
   var comments = ["差","一般","中等","还行","好"];
   
   for(var i = 0;i < images.length;i++){
       images[i].onmouseover = function(){
           var index = this.getAttribute("title");
        //索引
           if(index < 3){
               for(var j =0;j < index;j++){
                   images[j].src = "./images/star1.png";
               }
           }else{
               for(var m = 0;m < index;m++){
                   images[m].src = "./images/star2.png";
               }
           }
           txt.value = comments[index-1];//将数组添加进txt中
       }
       //鼠标移开后效果清除
       images[i].onmouseout = function(){
           for(var n = 0;n < images.length;n++){
               images[n].src = "./images/star0.png";
           }
           txt.value = "";
       }
   }
</script>
</html>